<template>
  <div class="login-logo-wrap">
    <div class="left-info">
      <div
        class="logo-wrap"
        :class="{ 'logo-small-wrap': systemInfo.logoType !== '1' }"
      >
        <div v-if="isLogoError" class="logo-occupants">
          <i class="iconfont icon-logopeizhi"></i>
        </div>
        <img
          v-else-if="systemInfo.logoType !== '1'"
          class="logo"
          :src="systemInfo.logo"
          @error="logoLoadError"
          alt=""
        />
        <img
          v-else
          class="logo-big"
          :src="systemInfo.logo"
          @error="logoLoadError"
          alt=""
        />
      </div>
      <div
        class="company-name"
        v-if="systemInfo.companyName && systemInfo.logoType !== '1'"
      >
        {{ systemInfo.companyName }}
      </div>
    </div>
    <div class="divided-line" v-if="systemInfo.systemName"></div>
    <div class="system-name" v-if="systemInfo.systemName">
      {{ systemInfo.systemName }}
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "index",
  data() {
    return {
      isLogoError: false,
    };
  },
  methods: {
    logoLoadError() {
      this.isLogoError = true;
    },
  },
  computed: {
    ...mapGetters(["systemInfo"]),
  },
};
</script>

<style scoped lang="scss">
.login-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  //padding: 18px 0;
  font-size: 20px;
  position: fixed;
  left: 110px;
  top: 35px;

  .left-info {
    //margin-right: 12px;
    display: flex;
    align-items: center;
    .logo-big {
      height: 40px;
    }
    .logo-small-wrap {
    }

    .logo-wrap {
      height: 40px;
      position: relative;

      .logo {
        height: 40px;
      }

      .logo-occupants {
        width: 30px;
        height: 30px;
        text-align: center;

        i {
          width: 30px;
          height: 30px;
          line-height: 30px;
          font-size: 30px;
        }
      }
    }

    .company-name {
      margin-left: 8px;
      // margin-right: 12px;
      font-size: 30px;
      line-height: 40px;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .divided-line {
    height: 30px;
    border-left: 1px solid #eee;
    margin-left: 12px;
  }

  .system-name {
    margin-left: 12px;
    font-size: 25px;
    line-height: 25px;
    white-space: nowrap;
    text-align: center;
  }
}
</style>
